<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center extension_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub extension_fd0_0'>
                    <view class='flex flex-wrap align-center extension_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  extension_fd0_0_c0_c0'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='extension_fd0_0_c1_c0'>申请延时</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end extension_fd0_0_c0'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction align-stretch benben-flex-layout extension_flex_1">
                <view class='flex  align-center extension_fd1_0' @tap.stop="pickerDiy1716281323886=true">
                    <text class='extension_fd1_0_c0'>延时时长</text>
                    <benben-input class='extension_fd1_0_c1' type="text" :placeholder="`请选择`" confirm-type="done" :maxlength="-1" 
					:adjust-position='true' placeholder-style="color:#999;font-size:28rpx" :disabled="true" v-model="list_name" />
                    <text class='fu-iconfont2  extension_fd1_0_c2'>&#xe7f2;</text>
                </view>
                <text class='extension_fd1_1'>延时原因</text>
                <view class='flex flex-wrap extension_fd1_2'>
                    <textarea class='flex extension_input_fd1_2' :placeholder="'请详细描述延时原因，审核更快！'" :adjust-position='true' 
					:maxlength="240" :show-num='true' placeholder-style="color:#999;font-size:28rpx" v-model="input1" />
                    <!-- <template>
                        <view class='flex flex justify-end extension_numberfd1_2_c0'>
                            <text>{{input1.length}}</text>
                            <text>/</text>
                            <text>240</text>
                        </view>
                    </template> -->
                </view>
                <benben-images-upload ref="benbenImagesUploadfd1_3" :img-list.sync="input2" :is-show-tips='true' :maxlength="6">
                    <template #content="{ num, maxlength, isShow, imgList }">
                        <view class="flex flex-wrap align-start flex extension_fd1_3">

                            <view v-for="(image, index) in input2" :key="index" class='flex position-relative extension_fd1_30'>
                                <text class='fu-iconfont2 position-absolute extension_fd1_300' @tap.stop="$refs.benbenImagesUploadfd1_3.delImage(index)">&#xE8E7;</text>
                                <image class='extension_fd1_301' @tap.stop="$refs.benbenImagesUploadfd1_3.previewImage(index)" mode="aspectFill" :src='image'></image>
                            </view>

                            <image class='extension_fd1_31' @tap.stop="$refs.benbenImagesUploadfd1_3.manyChooseImage()" v-if="input2.length < 6" mode="aspectFit" :src='STATIC_URL+"55.jpg"'></image>
                            <text class='image_upload_tips extension_fd1_32'>最多上传{{num}}/{{maxlength}}张图片</text>
                        </view>
                    </template>
                </benben-images-upload>
            </view>

            <!---flex布局flex布局结束-->
            <!--选择器开始 -->
            <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1716281323886" :label.sync='list_name' :value.sync='list_id' :options='list' mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
                <template #picker-header>
                    <view class='flex flex-wrap align-center justify-between extension_picker2_0'>
                        <text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
                        <text>选择时长</text>
                        <text class='extension_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
                    </view>
                </template>
            </benben-picker>
            <!--选择器结束 -->
            <view class="flex flex-wrap align-center justify-center benben-position-layout flex extension_flex_3">
                <button class='extension_fd3_0' @tap.stop="getqr67289361f955Func()">提交</button>

            </view>
            <view :style="{height: '160rpx'}"></view>


        </view>
    </page-body>
</template>
<script>
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},


        data() {
            return {
                "pickerDiy1716281323886": false,
                "list": [{
                    "name": "5分钟",
                    "value": "5",
                    "image": ""
                }, {
                    "name": "10分钟",
                    "value": "10",
                    "image": ""
                }, {
                    "name": "20分钟",
                    "value": "20",
                    "image": ""
                }, {
                    "name": "30分钟",
                    "value": "30",
                    "image": ""
                }, {
                    "name": "40分钟",
                    "value": "40",
                    "image": ""
                }, {
                    "name": "50分钟",
                    "value": "50",
                    "image": ""
                }, {
                    "name": "60分钟",
                    "value": "60",
                    "image": ""
                }],
                "list_id": "",
                "list_name": "",
                "input1": "",
                "input2": [],
                "order_sn": "",
                "type": ""
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
            let {
                order_sn,
                type
            } = options
            if (order_sn !== undefined) this.order_sn = order_sn
            if (type !== undefined) this.type = type
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            //骑手端-提交订单延时申请
            async getqr67289361f955Func() {
                if (!validate(this.list_id, 'require')) {
                    this.$message.info('请选择延迟时间');
                    return false;
                }
                if (!validate(this.input1, 'require')) {
                    this.$message.info('请填写延迟原因');
                    return false;
                }
                //请求方法
                //数据验证

                let data667289361f955 = await this.$api.dbPost(global.apiUrls.post667289361f955, {
                    order_sn: this.order_sn,
                    order_type: this.type,
                    delay_time: this.list_id,
                    delay_reason: this.input1,
                    delay_images: this.input2.toString()
                });
                if (!data667289361f955) return
                if (data667289361f955.data.code != 1) {
                    this.$message.info(data667289361f955.data.msg);
                    return
                }
                let info667289361f955 = data667289361f955.data;


                uni.showToast({
                    title: '提交成功',
                    mask: true,
                    icon: 'none',
                    duration: 1500
                });
                setTimeout(() => {
                    this.$urouter.navigateBack(1);
                }, 500)
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;
    }

    .extension_flex_0 {
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .extension_fd0_0_c1_c0 {
        font-size: 36rpx;
        font-weight: 700;
        color: #333333;
        line-height: 50rpx;
    }

    .extension_fd0_0_c0_c0 {
        font-size: 36rpx;
        color: #333;
    }

    .extension_fd0_0_c0 {
        width: 120rpx;
    }

    .extension_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .extension_flex_1 {
        border-top: 20px solid rgba(246, 247, 249, 1);
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .extension_fd1_32 {
        font-size: 32rpx;
        color: #d5d5d5;
    }

    .extension_fd1_31 {
        width: 180rpx;
        height: 180rpx;
        margin: 0rpx 24rpx 24rpx 0rpx;
    }

    .extension_fd1_301 {
        width: 180rpx;
        height: 180rpx;
    }

    .extension_fd1_300 {
        top: 0rpx;
        right: 0rpx;
        z-index: 10;
        color: #ff5536;
    }

    .extension_fd1_30 {
        margin: 0rpx 24rpx 24rpx 0rpx;
    }

    .extension_fd1_3 {
        width: 750rpx;
        padding: 24rpx 0rpx 0rpx 24rpx;
    }

    .extension_numberfd1_2_c0 {
        width: 100%;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 46rpx;
        font-weight: 400;
    }

    .extension_input_fd1_2 {
        width: 660rpx;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
        white-space: pre-wrap;
		padding: 32rpx 0 0 0;
    }

    .extension_fd1_2 {
        background: rgba(246, 247, 249, 1);
        width: 100%;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        padding: 10rpx 10rpx 0rpx 16rpx;
        height: 288rpx;
    }

    .extension_fd1_1 {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        margin: 32rpx 0rpx 32rpx 0rpx;
    }

    .extension_fd1_0_c2 {
        color: rgba(112, 112, 112, 1);
        font-size: 22rpx;
    }

    .extension_fd1_0_c1 {
        text-align: right;
        margin: 0rpx 24rpx 0rpx auto;
    }

    .extension_fd1_0_c0 {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
    }

    .extension_fd1_0 {
        border-bottom: 1px solid rgba(238, 238, 238, 1);
        padding: 32rpx 0rpx 32rpx 0rpx;
    }

    .extension_picker2_0_c2 {
        color: var(--benbenFontColor4);
    }

    .extension_picker2_0 {
        border-bottom: 1px solid #eee;
        background: #fff;
        padding: 0rpx 32rpx 0rpx 32rpx;
        line-height: 88rpx;
        border-radius: 25rpx 25rpx 0rpx 0rpx;
        background-size: 100% auto !important;
    }

    .extension_flex_3 {
        width: 750rpx;
        height: 160rpx;
        overflow: hidden;
        z-index: 10;
        bottom: calc(0rpx + var(--window-bottom));
    }

    .extension_fd3_0 {
        background: #FF8E21;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        width: 686rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        height: 80rpx;
        font-weight: 500;
    }
</style>